<template>
  <div>
      <el-container>
          <el-header height="150px">
              <div id="d1" style="width: 1200px;height:30px;margin: 0 auto">
                  <a style="padding: 0 20px;color: #333; float: left" href="">严选车官网</a>
              </div>
              <div id="d2" style="background-color: #e14800;margin: 0 auto;height: 40px">
                  <div style="width: 1200px;margin: 0 auto;line-height: 40px">
                      <a class="a1" href="">首页</a>
                      <a class="a1" href="">社区</a>
                      <a class="a1" href="">积分商城</a>
                      <a class="a1" href="">车友会群</a>
                      <a class="a1" href="">问题反馈</a>
                      <span style="padding-left: 570px">
                        <a class="a1" href="">登录</a>
                        <a class="a1" href="">注册</a>
                    </span>
                  </div>
              </div>
          </el-header>
          <el-main>
              <div style="width: 1200px;margin: 0 auto">
                  <el-card class="box-card" v-for="o in 8">
                      <div slot="header" class="clearfix">
                          <span>车友讨论</span>
                          <el-button style="float: right; padding: 3px 0" type="text">评论</el-button>
                      </div>
                      <div v-for="o in arr" :key="o" class="text item">
                          <h3>
                              <h3>{{talk.nickname}}:{{talk.content}}</h3>
                              <p>发布于:{{talk.created}}</p>
                          </h3>
                          <div v-for="c in arr">
                              <h4>{{c.nickname}}评论道:{{c.content}}
                                  <span style="float: right">发布于:{{c.created}}</span>
                              </h4>
                          </div>
                      </div>
                  </el-card>
              </div>

          </el-main>


          <!--top-->
          <el-backtop :bottom="120">
              <div style="{
                height: 100%;
                width: 100%;
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0,0,0, .12);
                text-align: center;
                line-height: 40px;
                color: #1989fa;
                }">Top</div>
          </el-backtop>


          <div id="r-footer">
              <div class="r-footer-container">
                  <div class="baozhang"></div>
                  <div class="link-clearfix">
                      <div class="link-left">
                          <div class="link-left_item">
                              <div class="link-left_item-title">关于我们</div>
                              <ul>
                                  <li><a href="">公司介绍</a></li>
                                  <li><a href="">联系我们</a></li>
                                  <li><a href="">加入我们</a></li>
                                  <li><a href="">加盟合伙人</a></li>
                              </ul>
                              <ul>
                                  <li><a href="">用户服务协议</a></li>
                                  <li><a href="">隐私政策</a></li>
                                  <li><a href="">法律声明</a></li>
                                  <li><a href="">协议及声明</a></li>
                              </ul>
                          </div>
                          <div class="link-left_item" style="width: 140px">
                              <div class="link-left_item-title">交易流程</div>
                              <ul>
                                  <li><a href="">买车流程</a></li>
                                  <li><a href="">卖车流程</a></li>
                                  <li><a href="">异地购车</a></li>
                              </ul>
                          </div>
                          <div class="link-left_item">
                              <div class="link-left_item-title">二手车精选</div>
                              <ul>
                                  <li><a href="">车型库</a></li>
                                  <li><a href="">二手车资讯</a></li>
                                  <li><a href="">二手车问答</a></li>
                              </ul>
                              <ul>
                                  <li><a href="">二手车估价</a></li>
                                  <li><a href="">二手车迁入标准</a></li>
                              </ul>
                          </div>
                      </div>
                      <div class="link-right">
                          <div class="link-right_tel">
                              <div class="number">400-039-6051</div>
                              <div class="time">周一至周日 9:00-18:00</div>
                              <div class="text">免费咨询(咨询、建议、投诉)</div>
                          </div>
                          <div class="link-right_app">
                              <div class="r-item">
                                  <span>关注微信</span>
                                  <div class="lazyload">
                                      <img src="" alt="" style="width: 100%;">
                                  </div>
                              </div>
                              <div class="r-item">
                                  <span>下载APP</span>
                                  <div class="lazyload">
                                      <img src="" alt="" style="width: 100%;">
                                  </div>
                              </div>
                          </div>
                          <div class="link-right_sns">
                          </div>
                      </div>
                  </div>
              </div>
              <div id="r-footer-copyright">
                  <div class="r-footer-copyright-container">
                      <img src="" alt="" >
                  </div>
              </div>
          </div>
      </el-container>

  </div>
</template>

<script>


export default {


}
</script>

<style>
.el-header a{
    text-decoration: none;
}
.a1{
    display: inline;
    color: white;
    padding: 0 20px;
    text-align: center;

}
.el-header a:hover{
    padding: 11px 20px 12px 20px;
    color: #e14800;
    background-color: white;
}
.link-clearfix {
    width: 1200px;
    height: 160px;
    margin: 40px auto;
}

.link-left {
    width: 758px;
    height: 124px;
    float: left;
}
.link-left a{
    text-decoration: none;
}
.link-left a:hover{
    color: #ff6d24;
}

.link-left_item {
    width: 300px;
    height: 123px;
    margin-bottom: 6px;
    display: inline-block;
    vertical-align: top;
}

.link-left_item-title {
    width: 234px;
    height: 21px;
    font-size: 16px;
    color: #fff;
    margin: 0 0 10px 0;
}

ul {
    display: inline-block;
    padding: 0;
    margin: 0 40px 0 0;
    vertical-align: top;
}

li {
    line-height: 24px;
    font-size: 14px;
    list-style: none;
    width: 110px;
    height: 24px;
}

li > a {
    font-size: 13px !important;
    color: #adadad;
}

.link-right{
    float: right;
    width: 440px;
    position: relative;
}
.link-right_tel{
    width: 160px;
    float: left;
    color: #fff;
}

.link-right_app{
    float: left;
    width: 272px;
    height: 136px;
}
.link-right_sns{
    display: block;
    float: left;
    width: 424px;
    height: 24px;
    background-image: url("../assets/partner_img/sns1.png");
}



#r-footer {
    background-color: #4c4c4c;
    width: 100%;
    height: 400px;
}

.r-footer-container {
    width: 1200px;
    height: 320px;
    margin: 0 auto;

}
#r-footer-copyright{
    width: 100%;
    height: 80px;
    font-size: 12px;
    color: #fff;
    background-color: #2f2f2f;

}
.r-footer-copyright-container{
    width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.baozhang {
    height: 74px;
    font-size: 16px;
    color: #fff;
    background-image: url("../assets/partner_img/b1.png");
}

</style>
